<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>

<%@ taglib uri="/WEB-INF/hexacta.tld" prefix="hexacta"%>

<head>
	<sx:head cache="true" />
	<link rel="stylesheet" href="/hrs-intranet/styles/errortag.css" type="text/css" />
	<link rel="stylesheet" href="/hrs-intranet/styles/TabContainerLocal.css" type="text/css" />
	<link rel="stylesheet" href="/hrs-intranet/styles/displaytag.css" type="text/css" />
	<link rel="stylesheet" type="text/css" href="/hrs-intranet/styles/jsgantt.css" />
	
	<script type="text/javascript" src="/hrs-intranet/js/jquery/js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="/hrs-intranet/js/highcharts/js/highcharts.js"></script>
	
	<script type="text/javascript">
		
		var chart;
		$(document).ready(function() {
			
			var jobFunctions = Array();
	
			var total = Array();
			var completed = Array();
	
			var bodyRows = $("#feedbackPeriodsResumeByRoles tbody tr");
			bodyRows.each(function(i){
			    var jobFunctionCell = $(this).find('td').eq(0);
			    var totalCell = $(this).find('td').eq(2);
			    var completedCell = $(this).find('td').eq(3);
			    jobFunctions[i] = jobFunctionCell.text();
			    total[i] = parseInt(totalCell.text());
			    completed[i] = parseInt(completedCell.text());
			});
			
		   	chart = new Highcharts.Chart({
		    	chart: {
					renderTo: 'container',
					defaultSeriesType: 'bar'
				},
				title: {
					text: 'Feedbacks by job function'
				},
				subtitle: {
					text: 'Total count vs. Completed count'
				},
				xAxis: {
					categories: jobFunctions,
					title: {
						text: null
					}
				},
				yAxis: {
					min: 0,
					title: {
						text: 'Feedbacks',
						align: 'high'
					}
				},
				tooltip: {
					formatter: function() {
						return ''+ this.series.name +': '+ this.y +' feedbacks';
					}
				},
				plotOptions: {
					bar: {
						dataLabels: {
							enabled: true
						}
					}
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'top',
					x: -100,
					y: 100,
					floating: true,
					borderWidth: 1,
					backgroundColor: '#FFFFFF',
					shadow: true
				},
				credits: {
					enabled: false
				},
				series: [{
						name: 'Total',
						data: total
					}, {
						name: 'Completed',
						data: completed
					}]
				});
		   });

		</script>
	
</head>

<s:include value="errorsSection.jsp"></s:include>

<script type="text/javascript">
</script>

<s:form cssClass="formClass">
	<s:textfield name="period" label="Period" readonly="true" />
</s:form>

<display:table id="feedbackPeriodsResumeByRoles"
	name="feedbackPeriodsResumeByRoles" defaultsort="1"
	defaultorder="ascending"
	requestURI="FeedbackControlPanelAction_listFeedbackPeriods"
	class="listable" cellpadding="0" cellspacing="0"
	pagesize="50">
	<display:column property="function" title="Function" sortable="true" />
	<display:column property="numberOfEmployees" title="Number of employees" sortable="true" />
	<display:column property="numberOfFeedbacks" title="Totals of feedbacks" sortable="true" />
	<display:column property="numberOfCompletedFeedbacks" title="Complete feedbacks" sortable="true" />
	<display:column property="numberOfIncompleteFeedbacks" title="Incomplete feedbacks" sortable="true" />
	<display:column property="percentageOfCompletion" title="% completed" sortable="true" />
</display:table>

<s:a href="FeedbackPeriodsAction" cssClass="Add" cssStyle="position:relative; left:1000px;">Return</s:a>
 
<div id="container" style="width: 920px; height: 650px; margin: 0 auto"></div>